<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress 2.0.0-beta.51">
    <script>
      (function() {
        const userMode = localStorage.getItem('vuepress-reco-color-scheme') || 'auto';
        const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

        if (userMode === 'dark' || (userMode === 'auto' && systemDarkMode)) {
          document.documentElement.classList.toggle('dark', true);
        }
      })();
    </script>
    <link rel="icon" href="/blog/images/logo.png"><link rel="stylesheet" href="/blog/css/common.scss"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><script language="javascript" type="text/javascript" src="/blog/js/jquery.min.js"></script><title>八、前端工程化 | hhのBlog</title><meta name="description" content="A blog about work and life">
    <link rel="modulepreload" href="/blog/assets/app.af94fc38.js"><link rel="modulepreload" href="/blog/assets/Vue2_2022111208.html.daad8d06.js"><link rel="modulepreload" href="/blog/assets/Vue2_2022111208.html.e09e295e.js"><link rel="prefetch" href="/blog/assets/index.html.66bbb558.js"><link rel="prefetch" href="/blog/assets/demo.html.5b7805fb.js"><link rel="prefetch" href="/blog/assets/20221108.html.f09e60bb.js"><link rel="prefetch" href="/blog/assets/Canvas_2022111301.html.ec3c03ed.js"><link rel="prefetch" href="/blog/assets/Canvas_2022111302.html.f6e335a9.js"><link rel="prefetch" href="/blog/assets/Canvas_2022111303.html.c0dc6265.js"><link rel="prefetch" href="/blog/assets/CSS_2022111401.html.5f0453af.js"><link rel="prefetch" href="/blog/assets/20221108.html.4bd4ca47.js"><link rel="prefetch" href="/blog/assets/20221115.html.324de47f.js"><link rel="prefetch" href="/blog/assets/20221116.html.0d3a3d59.js"><link rel="prefetch" href="/blog/assets/js01example.html.7d266980.js"><link rel="prefetch" href="/blog/assets/js01基础.html.0408303d.js"><link rel="prefetch" href="/blog/assets/js02域名.html.2f781f87.js"><link rel="prefetch" href="/blog/assets/js03保留小数.html.52d104e4.js"><link rel="prefetch" href="/blog/assets/js04常用正则.html.91ba30f3.js"><link rel="prefetch" href="/blog/assets/js05定时器.html.3304c7db.js"><link rel="prefetch" href="/blog/assets/01相关命令.html.d137a3a8.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111301.html.a182f227.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111302.html.da1bce3a.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111303.html.d48c88c8.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111304.html.82c5514a.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111201.html.440c0e4b.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111202.html.e6a8a1db.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111203.html.f1426fe0.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111204.html.e10b7300.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111205.html.4103afd7.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111206.html.d2a54f87.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111207.html.3e95d323.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111209.html.2b200f73.js"><link rel="prefetch" href="/blog/assets/Vue3_2022111301.html.21919b21.js"><link rel="prefetch" href="/blog/assets/Vue_2022111301.html.ef40b3e0.js"><link rel="prefetch" href="/blog/assets/Vuex_2022111301.html.86e597e2.js"><link rel="prefetch" href="/blog/assets/Vuex_2022111302.html.7e66ee69.js"><link rel="prefetch" href="/blog/assets/Vuex_2022111303.html.631f3db6.js"><link rel="prefetch" href="/blog/assets/vue2-10-下载文件流.html.f941e773.js"><link rel="prefetch" href="/blog/assets/2023.html.9b68f9e4.js"><link rel="prefetch" href="/blog/assets/info.html.a848c235.js"><link rel="prefetch" href="/blog/assets/guide.html.e425151d.js"><link rel="prefetch" href="/blog/assets/前端技术集合.html.cf2a3b37.js"><link rel="prefetch" href="/blog/assets/index.html.d2d3b8ef.js"><link rel="prefetch" href="/blog/assets/01简介.html.40ba5a67.js"><link rel="prefetch" href="/blog/assets/Button.html.8c129817.js"><link rel="prefetch" href="/blog/assets/api.html.e0d147e4.js"><link rel="prefetch" href="/blog/assets/home.html.e1e35d1b.js"><link rel="prefetch" href="/blog/assets/home1.html.e4c04026.js"><link rel="prefetch" href="/blog/assets/home2.html.58a624a1.js"><link rel="prefetch" href="/blog/assets/plugin.html.b944638b.js"><link rel="prefetch" href="/blog/assets/theme.html.5ff8341a.js"><link rel="prefetch" href="/blog/assets/info.html.de54f66c.js"><link rel="prefetch" href="/blog/assets/mac上使用iterm2.html.93ceff56.js"><link rel="prefetch" href="/blog/assets/账号网站合集.html.8f9d6378.js"><link rel="prefetch" href="/blog/assets/面试题2022111401.html.475fb69e.js"><link rel="prefetch" href="/blog/assets/info.html.3ee938b6.js"><link rel="prefetch" href="/blog/assets/overtime.html.a3b609ca.js"><link rel="prefetch" href="/blog/assets/password.html.f40ffe93.js"><link rel="prefetch" href="/blog/assets/project.html.e6805471.js"><link rel="prefetch" href="/blog/assets/实验室检测.html.8cf7547b.js"><link rel="prefetch" href="/blog/assets/智慧检测平台.html.dd52a4be.js"><link rel="prefetch" href="/blog/assets/跨维产品菜单整理20230203.html.450b6471.js"><link rel="prefetch" href="/blog/assets/404.html.98e87f94.js"><link rel="prefetch" href="/blog/assets/index.html.72ac4063.js"><link rel="prefetch" href="/blog/assets/index.html.8cbdf524.js"><link rel="prefetch" href="/blog/assets/index.html.ce338eac.js"><link rel="prefetch" href="/blog/assets/index.html.73c4a578.js"><link rel="prefetch" href="/blog/assets/index.html.d75650eb.js"><link rel="prefetch" href="/blog/assets/index.html.c5770dab.js"><link rel="prefetch" href="/blog/assets/index.html.d5122042.js"><link rel="prefetch" href="/blog/assets/index.html.c0a5e9ba.js"><link rel="prefetch" href="/blog/assets/index.html.51ae8525.js"><link rel="prefetch" href="/blog/assets/index.html.e53514d3.js"><link rel="prefetch" href="/blog/assets/index.html.09988c79.js"><link rel="prefetch" href="/blog/assets/index.html.eb108376.js"><link rel="prefetch" href="/blog/assets/index.html.2f61b3ca.js"><link rel="prefetch" href="/blog/assets/index.html.08946a35.js"><link rel="prefetch" href="/blog/assets/index.html.e695e9c9.js"><link rel="prefetch" href="/blog/assets/index.html.3d66ccdd.js"><link rel="prefetch" href="/blog/assets/index.html.1ff935f2.js"><link rel="prefetch" href="/blog/assets/index.html.a3ad1cd1.js"><link rel="prefetch" href="/blog/assets/index.html.b57762aa.js"><link rel="prefetch" href="/blog/assets/index.html.08b3a957.js"><link rel="prefetch" href="/blog/assets/index.html.9cbf2d78.js"><link rel="prefetch" href="/blog/assets/index.html.4bc70fa1.js"><link rel="prefetch" href="/blog/assets/index.html.faf16132.js"><link rel="prefetch" href="/blog/assets/demo.html.a850e9b9.js"><link rel="prefetch" href="/blog/assets/20221108.html.46471f50.js"><link rel="prefetch" href="/blog/assets/Canvas_2022111301.html.a5e91418.js"><link rel="prefetch" href="/blog/assets/Canvas_2022111302.html.ff7102b1.js"><link rel="prefetch" href="/blog/assets/Canvas_2022111303.html.bd8b572a.js"><link rel="prefetch" href="/blog/assets/CSS_2022111401.html.be8e29c7.js"><link rel="prefetch" href="/blog/assets/20221108.html.9e6fc05c.js"><link rel="prefetch" href="/blog/assets/20221115.html.5e544c67.js"><link rel="prefetch" href="/blog/assets/20221116.html.663a1bdb.js"><link rel="prefetch" href="/blog/assets/js01example.html.e7f57aff.js"><link rel="prefetch" href="/blog/assets/js01基础.html.2e918579.js"><link rel="prefetch" href="/blog/assets/js02域名.html.d1b1bae3.js"><link rel="prefetch" href="/blog/assets/js03保留小数.html.f3c8d2f4.js"><link rel="prefetch" href="/blog/assets/js04常用正则.html.4266e782.js"><link rel="prefetch" href="/blog/assets/js05定时器.html.444cce0c.js"><link rel="prefetch" href="/blog/assets/01相关命令.html.81697624.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111301.html.1f3a3c9d.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111302.html.db8d0905.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111303.html.3ab1d537.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111304.html.f4686d41.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111201.html.b263cecf.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111202.html.348b7b89.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111203.html.047acc5f.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111204.html.0d2896ce.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111205.html.9768009b.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111206.html.f1e0fa5e.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111207.html.9b090633.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111209.html.7fedd35c.js"><link rel="prefetch" href="/blog/assets/Vue3_2022111301.html.21fe75fc.js"><link rel="prefetch" href="/blog/assets/Vue_2022111301.html.2d5e0d45.js"><link rel="prefetch" href="/blog/assets/Vuex_2022111301.html.60c6a791.js"><link rel="prefetch" href="/blog/assets/Vuex_2022111302.html.751868dc.js"><link rel="prefetch" href="/blog/assets/Vuex_2022111303.html.3fa18bdf.js"><link rel="prefetch" href="/blog/assets/vue2-10-下载文件流.html.b6206ee7.js"><link rel="prefetch" href="/blog/assets/2023.html.0936ae58.js"><link rel="prefetch" href="/blog/assets/info.html.a1a68d8b.js"><link rel="prefetch" href="/blog/assets/guide.html.8a368790.js"><link rel="prefetch" href="/blog/assets/前端技术集合.html.9ca234a3.js"><link rel="prefetch" href="/blog/assets/index.html.edaee29a.js"><link rel="prefetch" href="/blog/assets/01简介.html.5ef2778e.js"><link rel="prefetch" href="/blog/assets/Button.html.af92d008.js"><link rel="prefetch" href="/blog/assets/api.html.f4fa47e2.js"><link rel="prefetch" href="/blog/assets/home.html.e09d15f1.js"><link rel="prefetch" href="/blog/assets/home1.html.08d478e3.js"><link rel="prefetch" href="/blog/assets/home2.html.0a335270.js"><link rel="prefetch" href="/blog/assets/plugin.html.bc46a390.js"><link rel="prefetch" href="/blog/assets/theme.html.73112f00.js"><link rel="prefetch" href="/blog/assets/info.html.b09899b8.js"><link rel="prefetch" href="/blog/assets/mac上使用iterm2.html.129f6a2b.js"><link rel="prefetch" href="/blog/assets/账号网站合集.html.f39ea8dc.js"><link rel="prefetch" href="/blog/assets/面试题2022111401.html.51141716.js"><link rel="prefetch" href="/blog/assets/info.html.8f33962c.js"><link rel="prefetch" href="/blog/assets/overtime.html.6b269d77.js"><link rel="prefetch" href="/blog/assets/password.html.1ccccfa6.js"><link rel="prefetch" href="/blog/assets/project.html.1ac0116d.js"><link rel="prefetch" href="/blog/assets/实验室检测.html.811b00ea.js"><link rel="prefetch" href="/blog/assets/智慧检测平台.html.74f12da9.js"><link rel="prefetch" href="/blog/assets/跨维产品菜单整理20230203.html.d8e60b11.js"><link rel="prefetch" href="/blog/assets/404.html.761b14a0.js"><link rel="prefetch" href="/blog/assets/index.html.3156a3ca.js"><link rel="prefetch" href="/blog/assets/index.html.0ac8c580.js"><link rel="prefetch" href="/blog/assets/index.html.17c3e87f.js"><link rel="prefetch" href="/blog/assets/index.html.11c9aab7.js"><link rel="prefetch" href="/blog/assets/index.html.4e5ab5fd.js"><link rel="prefetch" href="/blog/assets/index.html.800eacc8.js"><link rel="prefetch" href="/blog/assets/index.html.65e76f2c.js"><link rel="prefetch" href="/blog/assets/index.html.3b91d0bf.js"><link rel="prefetch" href="/blog/assets/index.html.59b51092.js"><link rel="prefetch" href="/blog/assets/index.html.f939c3c1.js"><link rel="prefetch" href="/blog/assets/index.html.de2abe69.js"><link rel="prefetch" href="/blog/assets/index.html.739bd11b.js"><link rel="prefetch" href="/blog/assets/index.html.2d86bd8b.js"><link rel="prefetch" href="/blog/assets/index.html.b093f5ce.js"><link rel="prefetch" href="/blog/assets/index.html.c0a0758f.js"><link rel="prefetch" href="/blog/assets/index.html.3ec16541.js"><link rel="prefetch" href="/blog/assets/index.html.72ba4570.js"><link rel="prefetch" href="/blog/assets/index.html.67fe3a27.js"><link rel="prefetch" href="/blog/assets/index.html.28a05aba.js"><link rel="prefetch" href="/blog/assets/index.html.5342a2c2.js"><link rel="prefetch" href="/blog/assets/index.html.c1a1958b.js"><link rel="prefetch" href="/blog/assets/index.html.267fccd4.js"><link rel="prefetch" href="/blog/assets/reco-valine.ed4545b0.js"><link rel="prefetch" href="/blog/assets/Button.a2ab7687.js"><link rel="prefetch" href="/blog/assets/Demo.3e2abc15.js"><link rel="prefetch" href="/blog/assets/setupDevtools-EXVHPMXB.8c234e79.js">
    <link rel="stylesheet" href="/blog/assets/style.0a08fff0.css">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme-container"><div class="common-wrapper"><div><header class="navbar-container"><span class="nav-item site-brand"><a href="/blog/" class=""><img class="logo" src="/blog/images/logo.png" alt="hhのBlog"><span class="site-name can-hide">hhのBlog</span></a></span><div class="nav-item navbar-links-wrapper" style=""><form class="search-box" role="search"><input type="search" autocomplete="off" spellcheck="false" value><!----></form><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/blog/" class="nav-link" aria-label="Home"><!--[--><!--]--> Home <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/categories/ToDoList/1/" class="nav-link" aria-label="Notes"><!--[--><!--]--> Notes <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/tags/Vue/1/" class="nav-link" aria-label="Tags"><!--[--><!--]--> Tags <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/docs/" class="nav-link" aria-label="work"><!--[--><!--]--> work <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/blogs/_List/info.html" class="nav-link" aria-label="周计划清单"><!--[--><!--]--> 周计划清单 <!--[--><!--]--></a></div><!--]--></nav><a class="icon-container left btn-toggle-dark-mode" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:19px;height:19px;font-size:19px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3h.393a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 2.992z"></path><path d="M17 4a2 2 0 0 0 2 2a2 2 0 0 0-2 2a2 2 0 0 0-2-2a2 2 0 0 0 2-2"></path><path d="M19 11h2m-1-1v2"></path></g></svg><!----></a><a class="icon-container left btn-toggle-menus" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:20px;height:20px;font-size:20px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="19" r="1"></circle><circle cx="12" cy="5" r="1"></circle></g></svg><!----></a></div></header><div class="mobile-menus-container"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/blog/" class="nav-link" aria-label="Home"><!--[--><!--]--> Home <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/categories/ToDoList/1/" class="nav-link" aria-label="Notes"><!--[--><!--]--> Notes <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/tags/Vue/1/" class="nav-link" aria-label="Tags"><!--[--><!--]--> Tags <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/docs/" class="nav-link" aria-label="work"><!--[--><!--]--> work <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/blogs/_List/info.html" class="nav-link" aria-label="周计划清单"><!--[--><!--]--> 周计划清单 <!--[--><!--]--></a></div><!--]--></nav><div class="appearance"><span>Appearance </span><a class="icon-container left btn-toggle-dark-mode" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:19px;height:19px;font-size:19px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3h.393a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 2.992z"></path><path d="M17 4a2 2 0 0 0 2 2a2 2 0 0 0-2 2a2 2 0 0 0-2-2a2 2 0 0 0 2-2"></path><path d="M19 11h2m-1-1v2"></path></g></svg><!----></a></div></div><div class="sidebar-mask"></div><aside class="series-container"><!--[--><!--[--><section class="series-group series-item"><h5 class="series-heading">Vue问题记录</h5><ul><li><!--[--><a href="/blog/blogs/Vue/vue2-10-xiazaiwenjianliu.html" class="nav-link series-item" aria-label="下载文件流"><!--[--><!--]--> 下载文件流 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111201" class="nav-link series-item" aria-label="数组"><!--[--><!--]--> 数组 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111201.html" class="nav-link series-item" aria-label="一、Vue概述"><!--[--><!--]--> 一、Vue概述 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111202.html" class="nav-link series-item" aria-label="二、Vue基本使用"><!--[--><!--]--> 二、Vue基本使用 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111201" class="nav-link series-item" aria-label="对象"><!--[--><!--]--> 对象 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111201.html" class="nav-link series-item" aria-label="一、Vue概述"><!--[--><!--]--> 一、Vue概述 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111202.html" class="nav-link series-item" aria-label="二、Vue基本使用"><!--[--><!--]--> 二、Vue基本使用 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111201" class="nav-link series-item" aria-label="表单"><!--[--><!--]--> 表单 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111201" class="nav-link series-item" aria-label="实操"><!--[--><!--]--> 实操 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111201" class="nav-link series-item" aria-label="其他"><!--[--><!--]--> 其他 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue_2022111301.html" class="nav-link series-item" aria-label="初始化Vue项目"><!--[--><!--]--> 初始化Vue项目 <!--[--><!--]--></a><!--]--></li></ul></section><!--]--><!--[--><section class="series-group series-item"><h5 class="series-heading active">Vue学习</h5><ul><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111201" class="nav-link series-item" aria-label="Vue2全家桶"><!--[--><!--]--> Vue2全家桶 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111201.html" class="nav-link series-item" aria-label="一、Vue概述"><!--[--><!--]--> 一、Vue概述 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111202.html" class="nav-link series-item" aria-label="二、Vue基本使用"><!--[--><!--]--> 二、Vue基本使用 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111203.html" class="nav-link series-item" aria-label="三、Vue模版语法"><!--[--><!--]--> 三、Vue模版语法 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111204.html" class="nav-link series-item" aria-label="四、Vue常用特性"><!--[--><!--]--> 四、Vue常用特性 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111205.html" class="nav-link series-item" aria-label="五、组件化开发"><!--[--><!--]--> 五、组件化开发 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111206.html" class="nav-link series-item" aria-label="六、前后端交互"><!--[--><!--]--> 六、前后端交互 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111207.html" class="nav-link series-item" aria-label="七、前端路由"><!--[--><!--]--> 七、前端路由 <!--[--><!--]--></a><!--]--></li><li><!--[--><a aria-current="page" href="/blog/blogs/Vue/Vue2_2022111208.html" class="router-link-active router-link-exact-active nav-link router-link-active series-item active" aria-label="八、前端工程化"><!--[--><!--]--> 八、前端工程化 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111209.html" class="nav-link series-item" aria-label="九、其他"><!--[--><!--]--> 九、其他 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vuex_2022111301" class="nav-link series-item" aria-label="Vuex"><!--[--><!--]--> Vuex <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vuex_2022111301.html" class="nav-link series-item" aria-label="一、Vuex概述"><!--[--><!--]--> 一、Vuex概述 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vuex_2022111302.html" class="nav-link series-item" aria-label="二、Vuex的基本使用"><!--[--><!--]--> 二、Vuex的基本使用 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vuex_2022111303.html" class="nav-link series-item" aria-label="三、Vuex的核心概念"><!--[--><!--]--> 三、Vuex的核心概念 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue3_2022111301" class="nav-link series-item" aria-label="Vue3"><!--[--><!--]--> Vue3 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue3_2022111301.html" class="nav-link series-item" aria-label="Vue3啦啦啦"><!--[--><!--]--> Vue3啦啦啦 <!--[--><!--]--></a><!--]--></li></ul></section><!--]--><!--]--></aside><!--[--><main class="page-container show-series show-catalog"><h1 class="page-title">八、前端工程化</h1><div class="page-info"><a class="icon-container left" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:18px;height:18px;font-size:18px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="7" r="4"></circle><path d="M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"></path></g></svg><span style="color:inherit;font-size:14px;" class="icon-text"><!--[-->hh<!--]--></span></a><a class="icon-container left" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:18px;height:18px;font-size:18px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 3"></path></g></svg><span style="color:inherit;font-size:14px;" class="icon-text"><!--[-->2022-11-13 18:51:00<!--]--></span></a><a class="icon-container left" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:18px;height:18px;font-size:18px;"><path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><span style="color:inherit;font-size:14px;" class="icon-text"><!--[-->前端<!--]--></span></a><a class="icon-container left" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:18px;height:18px;font-size:18px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.5" cy="8.5" r="1" fill="currentColor"></circle><path d="M4 7v3.859c0 .537.213 1.052.593 1.432l8.116 8.116a2.025 2.025 0 0 0 2.864 0l4.834-4.834a2.025 2.025 0 0 0 0-2.864L12.29 4.593A2.025 2.025 0 0 0 10.859 4H7a3 3 0 0 0-3 3z"></path></g></svg><span style="color:inherit;font-size:14px;" class="icon-text"><!--[-->Vue<!--]--></span></a><!----></div><div class="theme-reco-default-content"><div><blockquote><p>前端工程化又名<strong>前端模块化</strong></p></blockquote><h2 id="模块化相关规范" tabindex="-1"><a class="header-anchor" href="#模块化相关规范" aria-hidden="true">#</a> 模块化相关规范</h2><h3 id="模块化概述" tabindex="-1"><a class="header-anchor" href="#模块化概述" aria-hidden="true">#</a> 模块化概述</h3><ul><li>传统开发模式的主要问题 <ul><li>命名冲突</li><li>文件依赖</li></ul></li><li>通过模块化解决上述问题 <ul><li>模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是通过特定的接口公开内部成员，也可以依赖别的模块</li><li>好处：方便代码的复用，从而提高开发效率，并且方便后期的维护</li></ul></li></ul><h3 id="浏览器端模块化规范" tabindex="-1"><a class="header-anchor" href="#浏览器端模块化规范" aria-hidden="true">#</a> 浏览器端模块化规范</h3><ul><li>AMD:require.js</li><li>CMD:sea.js</li></ul><h3 id="服务器端模块化规范" tabindex="-1"><a class="header-anchor" href="#服务器端模块化规范" aria-hidden="true">#</a> 服务器端模块化规范</h3><ul><li>Common.js <ul><li>模块分为<code>单文件模块</code>与<code>包</code></li><li>模块成员导出<code>module.exports</code>和<code>exports</code></li><li>模块成员导入<code>require(&#39;模块标识符&#39;)</code></li></ul></li></ul><h3 id="大一统的模块化规范-→-es6模块化" tabindex="-1"><a class="header-anchor" href="#大一统的模块化规范-→-es6模块化" aria-hidden="true">#</a> 大一统的模块化规范 → ES6模块化</h3><blockquote><p>在ES6模块化规范诞生之前，JavaScript社区已经尝试提出了AMD、CMD、CommonJS等模块化规范、但是这些社区提出的模块化标准，还是存在一定的差异性和局限性的。并不是浏览器与服务器通用的模块化标准。</p></blockquote><h3 id="es6模块化" tabindex="-1"><a class="header-anchor" href="#es6模块化" aria-hidden="true">#</a> ES6模块化</h3><ul><li>Node.js中通过<code>babel</code>体验ES6模块化</li></ul><blockquote><p>babel是语法转换工具、可以把高级的有兼容性的JavaScript代码 转换成低级的没有兼容性的JavaScript代码</p></blockquote><ol><li>npm install <code>save-dev @babel/core @babel/cli @babel/preset-env @babel/node</code></li><li>npm install <code>--save @babel/polyfill</code></li><li>项目跟目录创建文件 <code>babel.config.js</code></li><li>babel.congif.js 文件内容如</li></ol><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>//语法转换数组
const presets = [
 [&#39;@babel/env&#39;,{
  //转换完毕 起码要支持以
下浏览器以及版本
  targets:{
   edfe:&#39;17&#39;,
   firefox:&#39;60&#39;,
   chrome:&#39;67&#39;,
   safari:&#39;67&#39;
  }
 }]
];  
module.exports = {presets}
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="5"><li>通过<code>npx babel-node index.js</code> 执行代码 <strong>npx在高版本的npm版本中就给提供了</strong></li></ol><ul><li>基本语法 <ul><li>默认导出与默认导入</li></ul></li></ul><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>假设当前文件模块为m1.js
//定义私有成员a/c
let a=10;
let c = 20;
//外接访问不到变脸d，因为他没有被暴露出去
let d = 30;
function show(){}
//讲本模块中的私有成员暴露出去，供其他模块使用
export default{
a,c,show
}
&amp;&amp;
import m1 from &#39;./m1.js&#39;
console.log(m1) → {a:10,c=20,show:{function....}}
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li><ul><li><ul><li>默认导出<code>export default</code> 默认导出的成员</li><li>默认导入<code>import</code> 接收名称<code>from</code> 模块标识符</li><li>如果没有导出 默认是{}、但是不能多次导出<strong>在每个模块中只允许export default 一次</strong></li></ul></li><li>按需导出与按需导入</li></ul></li></ul><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>假设当前文件模块为m1.js
//向外按需导出变量s1
export let s1 = 10;
export let s2 = 20;
export function sy (){}
 &amp;&amp;
import {s1,s2 as ss2,say} from &#39;./m1.js&#39; //s2 通过as关键字起了个别名为ss2
console.log(s1) → 10
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li><ul><li><ul><li>按需导出 <code>export let s1 = 10</code></li><li>按需导入 <code>improt {s1} from 模块标识符</code></li><li><code>export default</code> 和 按需导出不冲突 可以同时存在 如↓</li><li><code>import m1,{s1,s2 as ss2,say} from &#39;./m1.js&#39;</code></li><li>按需导出不限制次数可以多次使用按需导出</li><li>按需导入可以通过<code>as</code>起别名<strong>原名直接失效哦</strong></li></ul></li><li>直接导入并执行模块代码 <ul><li>有时候我们只想单出的执行某个模块中的代码，并不需要得到模块中向外暴露的成员，此时、我们可以直接导入并执行模块代码。</li><li>import <code>&#39;./m2.js&#39;</code> <strong>表示直接执行模块代码、并不需要接收向外暴露的成员</strong></li></ul></li></ul></li></ul><h2 id="webpack用法" tabindex="-1"><a class="header-anchor" href="#webpack用法" aria-hidden="true">#</a> webpack用法</h2><ul><li>当前Web开发面临的困境</li></ul><ol><li>依赖关系错综复杂</li><li>静态资源请求效率低</li><li>模块化支持不友好</li><li>浏览器对高级JavaScript特性兼容程度较低</li><li>etc...等</li></ol><ul><li>webpack概述 <ul><li>webpack 是一个流行的前端项目构建工具（打包工具）、可以解决当前web开发中所面临的的困境</li><li>webpack提供了友好的模块化支持、以及<code>代码压缩混淆、处理js兼容问题、性能优化</code>等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性</li><li>目前绝大多数企业中的前端项目，都是基于webpack进行打包构建的。</li></ul></li><li>webpack的基本使用 <ul><li>创建列表隔行变色项目 <ul><li>新建空白目录，在根目录中运行<code>npm init -y</code>命令，初始化包管理配置文件 package.json</li><li>新建<code>src</code>源代码目录</li><li>在<code>src</code>中新建一个<code>index.html</code>首页</li><li>初始化首页的基本结构</li><li>运行<code>npm install jquery -S</code>命令，安装jquery</li><li>通过模块化的形式，实现列表隔行变色效果</li></ul></li><li>在项目中安装和配置webpack <ul><li>运行<code>npm install webpack webpack-cli -D</code>命令，安装webpack相关的包</li><li>在项目根目录中，创建名为<code>webpack.config.js</code>的webpack配置文件</li><li>在webpack的配置文件中，初始化如下基本配置 <ul><li><code>module.export = { mode:&#39;development&#39;}</code>//mode用来指定构建模式 开发的时候推荐<code>development</code> 上线的话需要再更改<code>production</code> 会压缩哦</li></ul></li><li>在<code>package.json</code>配置文件中的script节点下新增dev脚本如下 <ul><li>&#39;script&#39;:{dev:&#39;webpack&#39;} //script节点下的脚本可通过npm run执行</li><li>在终端中运行<code>npm run dev</code>命令，启动webpack进行项目打包</li></ul></li></ul></li><li>配置打包的入口与出口 <ul><li>webpack 的4.x 版本中默认约定： <ul><li>打包的入口文件为src → index.js</li><li>打包的输出文件为dist → main.js</li><li>如果要写修改打包入口与出口 可以在<code>webpack.config.js中新增</code></li></ul></li></ul></li></ul></li></ul><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>const path = require(&#39;path&#39;);//导入nodejs中专门操作路径的模块
module.exports = {
 entry:path.join(dirname,&#39;./src/index.js&#39;)//打包入口文件的路径
 output：{
  path:path.join(dirname,&#39;./dist&#39;)//输出文件的存放路劲
  filename:&#39;bundle.js&#39;//输出文件的名称
 }
}
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li><ul><li>配置webpack的自动打包功能 <ul><li>运行 <code>npm install webpack-dev-server -D</code>命令 安装支持项目自动打包的工具</li><li>修改package.json里面的script中的dev命令为<code>webpack-dev-serve</code> //script节点下的脚本可以用npm run 执行</li><li>将src → index.html中script脚本的引用路径改为打包后的js文件路径 <code>src=&quot;/bundle.js&quot;</code></li><li>运行<code>npm run dev</code>命令，进行重新打包</li><li>在浏览器中访问<em>http://localtion:8080</em>地址查看打包结果</li><li>mac 下 访问出错 需要添加以下代码到webpack.config.js</li></ul></li></ul></li></ul><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>// 添加以下代码：
devServer:{
 static:{
  directory:path.join(dirname,&#39;./&#39;),
  watch:true
 }
}
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li><ul><li><ul><li>注意：webpack-dev-server 会启动一个实时打包的http服务器</li><li>注意：webpack-dev-server 打包生成的输出文件，默认放到了项目根目录中，而且是虚拟的看不见的 。所以引用bundle.js的时候是‘/bundle’。</li></ul></li><li>配置html-webpack-plugin生成预览页面 <ul><li>运行<code>npm install html-webpack-plugin -D</code>命令，安装生成预览页面的插件</li><li>修改webpack.config.js文件头部区域，添加如下配置</li></ul></li></ul></li></ul><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>// 导入生成预览页面的插件 得到一个构造函数
const HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;)
const HtmlPlugin = new HtmlWebpackPlugin({
 template:&#39;./src/index.html&#39;,//指定要用到的模板文件
 filename:&#39;index.html&#39;//指定生成文件的名称，该文件存在于内存中，在目录中不显示
})
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li><ul><li>配置自动打包相关的参数 <ul><li>找到package.json中的配置</li><li>--open 打包完成后自动打开浏览器页面</li><li>--host 配置ip地址</li><li>--port配置端口</li><li>最终：script:{ dev :&#39;webpack-dev-server --open --host 127.0.0.1 --port 8888&#39;}</li></ul></li></ul></li><li>webpack中的加载器 <ul><li>通过 loader 打包非js 模块 <ul><li>在实际开发过程中，webpack 默认只能打包处理以.js 后缀名结尾的模块，其他非 .js 后缀名结尾的模块，webpack 默认处理不了，需要调用 1oader 加载器才可以正常打包，否则会报错！</li><li><code>loader</code> 加载器可以<em>协助</em> webpack 打包处理特定的文件模块，比如： <ul><li>less-loader 可以打包处理 . 1ess 相关的文件</li><li>sass-loader 可以打包处理 .scss 相关的文件</li><li>url-loader可以打包外理 css 中与 ur1路径相关的文件</li></ul></li></ul></li><li>loader的调用过程 <ul><li>将要被webpack打包处理的文件模块 <ul><li>是否为js模块 <ul><li>是 <ul><li>是否包含高级js语法 <ul><li>是 <ul><li>是否配置了babel <ul><li>是 → 调用loader处理</li><li>否 → 报错</li></ul></li></ul></li><li>否 <ul><li>webpack处理</li></ul></li></ul></li></ul></li><li>否 <ul><li>是否配置了对应的loader <ul><li>是 <ul><li>调用loader处理</li></ul></li><li>否 → 报错</li></ul></li></ul></li></ul></li></ul></li></ul></li><li>webpack 中加载器的基本使用 <ul><li>打包处理 css 文件 <ul><li>运行<code>npm i style-loader css-loader -D</code>命令，安装处理 css 文件的 loader</li><li>在 webpack.config.js 的 module -&gt; rules 数组中，添加 loader 规则如下：</li></ul></li></ul></li></ul></li></ul><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>module:{
 rules:[
  {test:/.css$/,use:[&#39;style-loader&#39;,&#39;css-loader&#39;]} //css
 ]
}
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li><ul><li><ul><li><ul><li><ul><li>其中<code>test</code>表示匹配的文件类型</li><li>其实中<code>use</code>表示对应要调用的loader</li><li>注意 <ul><li>use数组中 指定的loader顺序是固定的</li><li>多个loader的调用顺序是：从后往前调用的】</li></ul></li></ul></li></ul></li><li>打包处理less文件 <ul><li>运行<code>npm i less-loader less -D</code>命令 ++要一起安装less++</li><li>在 webpack.config.js 的 module -&gt; rules 数组中，添加 loader 规则如下：</li></ul></li></ul></li></ul></li></ul><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>module:{
 rules:[
  {test:/.less$/,use:[&#39;style-loader&#39;,&#39;css-loader&#39;,&quot;less-loader’]}//less
 ]
}
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li><ul><li><ul><li>打包处理scss文件 <ul><li>运行<code>npm i sass-loader node-sass -D</code>命令 ++要一起安装sass++</li><li>在 webpack.config.js 的 module -&gt; rules 数组中，添加 loader 规则如下：</li></ul></li></ul></li></ul></li></ul><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>module:{
 rules:[
  {test:/.scss$/,use:[&#39;style-loader&#39;,&#39;css-loader&#39;,&quot;sass-loader’]}//sass
 ]
}
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li><ul><li><ul><li>配置postCSS自动添加css的兼容前缀 <ul><li>运行 <code>npm i postcss-loader autoprefixer -D</code> 命令</li><li>在项目根目录中创建 postcss 的配置文件 postcss.config.js, 并初始化如下配置：</li></ul></li></ul></li></ul></li></ul><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>const autoprefixer = require(&#39;autoprefixer&#39;);//导入自动添加前缀的插件
module.exports = {
 plugins:[autoprefixer] //挂载插件
}
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li><ul><li><ul><li><ul><li>在 webpack.config.js 的 module -&gt; rules 数组中 -&gt; 找到css的正则 在后面添加 <code>postcss-loader</code></li></ul></li><li>打包样式表中的图片和字体文件 <ul><li>运行<code>npm i url-loader file-loader -D</code>命令</li><li>在 webpack. config.js 的 module -&gt; rules 数组中，添加 loader 规则如：</li></ul></li></ul></li></ul></li></ul><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>module:{
 rules:[
  {test:/.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
  use:&#39;url-loader?limit=16940&#39;
 ]
}
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li><ul><li><ul><li><ul><li><ul><li><code>?</code>后面是loader的参数项</li><li>limit 用来指定图片的大小，单位是字节，只有小于limit为xx大小的图片，才会被转为base64图片</li><li><strong>(我试了报错 不知道什么原因 TAT)</strong></li></ul></li></ul></li><li>打包处理js文件中的高级语法 <ul><li>安装babel转换器相关的包：<code>npm i babel-loader @babel/core @babel/runtime -D</code></li><li>安装babel语法插件相关的包：<code>npm i @babel/preset-env Qbabel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D</code></li><li>在项目根目录中，创建babel配置文件<code>babel.config.js</code> 并初始化如下</li></ul></li></ul></li></ul></li></ul><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>module.exports={
 presets:[&#39;@babel/preset-env&#39;],
 plugins:[&#39;@babel/plugin-transform-runtime&#39;,&#39;@babel/plugin-proposal-class-properties&#39;]
}
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li><ul><li><ul><li><ul><li>在 webpack.config.js 的 module -&gt; rules 数组中，添加 loader 规则如下： <ul><li><em>exclude 为排除项，表示babel-loader不需要处理node_modules中的js文件</em></li><li><code>{test:/\.js$/,use:&#39;babel-loader&#39;,exclude:/node_modules/}</code></li></ul></li></ul></li></ul></li></ul></li></ul><h2 id="vue单文件组件" tabindex="-1"><a class="header-anchor" href="#vue单文件组件" aria-hidden="true">#</a> Vue单文件组件</h2><ul><li>传统组件的问题和解决方案 <ul><li>问题 <ul><li>全局定义的组件必须保证组件的名称不重复</li><li>字符串模板缺乏语法高亮，在HTML有多行的时候，需要用到丑陋的<code>\</code></li><li>不支持CSS意味着当HTML和JavaScript组件化时，CSS被明显遗漏了</li><li>没有构建步骤限制，智能使用HTML和ES5 JavaScript，而不能使用预处理器（babel）</li></ul></li><li>解决方案 <ul><li>针对传统组件的问题，Vue提供了一个解决方案--&gt;使用Vue单文件组件</li></ul></li></ul></li><li>Vue单文件组件的基本用法 <ul><li>单文件组件的组成结构 <ul><li>template 组件的模板区域</li><li>script 业务逻辑区域</li><li>style 样式区域 <code>scoped</code>也要有的~</li></ul></li></ul></li><li>webpack中配置vue组件的加载器 ++不要安装17的最好是15的++ <ul><li>运行 <code>npm i vue-loader vue-template-compiler -D</code> 命令</li><li>在 webpack.config.is 配置文件中，添加 Vue-loader 的配置项如下：</li></ul></li></ul><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>const VueLoaderplugin = require(&#39;vue-loader/lib/plugin&#39;)
module.exports = {
 module：{
  rules:[{test:&#39;/.vue$&#39;,use:[&#39;vue-loader&#39;]}]
 },
 plugins:[new VueLoaderplugin]//引入
}
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li>在webpack项目中使用vue <ul><li>运行<code>npm i vue -s</code> 安装vue</li><li>在src → index.js 入口文件中，通过 <code>import Vue from &#39;vue&#39;</code>来导入vue构造函数</li><li>创建vue的实例对象并指定要控制的el区域</li><li>通过render函数渲染App根组件 <ul><li>导入Vue构造函数 <code>import Vue from &#39;vue&#39;</code></li><li>导入App根组件 <code>import App from &#39;.components/App.vue&#39;</code></li><li>创建vue实例 <code>&lt;div id=&#39;app&#39;&gt;</code><code>const vm = new Vue({</code><code>//指定vm实例要控制的页面区域</code><code>el:&#39;#app&#39;,</code><code>//通过render函数，把指定的组件渲染到el区域中</code><code>render:h=&gt;h(App)</code><code>})</code></li></ul></li></ul></li><li>webpack打包发布 <ul><li>上线之前需要通过webpack将应用进行整体打包，可以通过package,json文件配置打包命令 <ul><li>在package.json文件中配置webpack打包命令</li><li>将命令默认加在项目根目录中的webpack.config.js配置文件</li><li><code>&#39;script&#39;:{build:&#39;webpack -p&#39;}</code></li></ul></li></ul></li></ul><h2 id="vue脚手架" tabindex="-1"><a class="header-anchor" href="#vue脚手架" aria-hidden="true">#</a> Vue脚手架</h2><ul><li>Vue脚手架的基本用法 <ul><li>Vue脚手架用于快速生成Vue项目基础加购，<a href="https://cli.vuejs.org" target="_blank" rel="noopener noreferrer">官网<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></li><li>使用步骤 <ul><li>安装3.x版本的Vue脚手架 <code>npm install -g @vue/cli</code></li></ul></li><li>基于3.x版本的脚手架创建vue项目 <ul><li>基于交互是命令行的方式创建新版vue项目 <code>vue create pro-name</code></li><li>基于图形化洁面的方式创建新版vue项目 <code>vue ui</code></li><li>基于2.x的旧模板，创建旧版vue项目 <ul><li><code>npm install -g @vue/cli-init</code></li><li><code>npm init webpack pro-name</code></li></ul></li></ul></li></ul></li><li>Vue脚手架生成的项目结构分析 <ul><li><code>node_modules</code> 依赖包目录</li><li><code>public</code> 静态资源目录</li><li><code>src</code> 组件源码目录</li><li><code>babel.config.js</code> babel配置文件</li></ul></li><li>Vue脚手架的自定义配置 <ul><li>通过package.json配置项目 <ul><li>必须是符合规范的json语法 <ul><li><code>&quot;vue&quot;:{&quot;devServer&quot;:{&quot;port&quot;:8888,&quot;open&quot;:true}}</code></li><li>以上是cli低版本写法 （已失效！！！别试了！下面是正解~）</li></ul></li></ul></li><li>通过单独的配置文件配置项目 <ul><li>在项目的根目录创建vue.config.js</li><li>相关配置（正解！）<code>module.exports = {&quot;devServer&quot;:{&quot;port&quot;:7777,&quot;open&quot;:true}}</code></li></ul></li></ul></li></ul><h2 id="element-ui-的基本使用" tabindex="-1"><a class="header-anchor" href="#element-ui-的基本使用" aria-hidden="true">#</a> Element-UI 的基本使用</h2><ul><li>一套为开发者 、设计师、和产品经理准备的基于Vue2.0的桌面组件库 <a href="https://element.eleme.cn/#/zh-CN" target="_blank" rel="noopener noreferrer">官网<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></li><li>如何在项目中使用呢？ <ul><li>基于命令行方式手动安装 <ul><li>安装依赖包<code>npm i element -ui -S</code></li><li>导入 Element-Ui相关资源 <ul><li>//导入组件库</li><li><code>import ElementUI from &#39;element-ui&#39;</code></li><li>//导入组件相关样式</li><li><code>improt &#39;element-ui/lib/theme-chalk/index.css&#39;</code></li><li>//配置vue插件</li><li><code>Vue.use(Elemenet)</code></li></ul></li></ul></li><li>基于图形化界面自动安装 <ul><li><code>vue ui</code></li><li>vue项目管理器</li><li>插件 → 添加插件 → <code>vue-cli-plugin-element</code></li><li>配置插件，按需导入，减少打包后的体积</li></ul></li></ul></li></ul></div></div><footer class="page-meta"><div class="meta-item edit-link"><a class="icon-container left meta-item-label" href="https://gitee.com/i77ing/blog.git/edit/master/blogs/Vue/Vue2_2022111208.md" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:20px;height:20px;font-size:20px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-3"></path><path d="M9 15h3l8.5-8.5a1.5 1.5 0 0 0-3-3L9 12v3"></path><path d="M16 5l3 3"></path></g></svg><span style="color:inherit;font-size:14px;" class="icon-text"><!--[-->Edit this page<!--]--></span></a></div><div class="meta-item last-updated"><a class="icon-container left meta-item-label" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:20px;height:20px;font-size:20px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11.795 21H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4"></path><circle cx="18" cy="18" r="4"></circle><path d="M15 3v4"></path><path d="M7 3v4"></path><path d="M3 11h16"></path><path d="M18 16.496V18l1 1"></path></g></svg><span style="color:inherit;font-size:14px;" class="icon-text"><!--[-->Last Updated 2023-02-23 19:57:37<!--]--></span></a></div></footer><nav class="page-nav"><p class="hasPrev hasNext inner"><span class="page-nav-item prev"> ← 七、前端路由</span><span class="page-nav-item next">九、其他 → </span></p></nav><!----></main><!--]--><div class="page-catalog-container"><h5 class="tip">ON THIS PAGE</h5><ul><!--[--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/blogs/Vue/Vue2_2022111208.html#模块化相关规范" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="模块化相关规范"><!--[--><!--]--> 模块化相关规范 <!--[--><!--]--></a></li><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blog/blogs/Vue/Vue2_2022111208.html#模块化概述" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="模块化概述"><!--[--><!--]--> 模块化概述 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blog/blogs/Vue/Vue2_2022111208.html#浏览器端模块化规范" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="浏览器端模块化规范"><!--[--><!--]--> 浏览器端模块化规范 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blog/blogs/Vue/Vue2_2022111208.html#服务器端模块化规范" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="服务器端模块化规范"><!--[--><!--]--> 服务器端模块化规范 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blog/blogs/Vue/Vue2_2022111208.html#大一统的模块化规范-→-es6模块化" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="大一统的模块化规范 →  ES6模块化"><!--[--><!--]--> 大一统的模块化规范 →  ES6模块化 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blog/blogs/Vue/Vue2_2022111208.html#es6模块化" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="ES6模块化"><!--[--><!--]--> ES6模块化 <!--[--><!--]--></a></li><!--]--><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/blogs/Vue/Vue2_2022111208.html#webpack用法" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="webpack用法"><!--[--><!--]--> webpack用法 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/blogs/Vue/Vue2_2022111208.html#vue单文件组件" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="Vue单文件组件"><!--[--><!--]--> Vue单文件组件 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/blogs/Vue/Vue2_2022111208.html#vue脚手架" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="Vue脚手架"><!--[--><!--]--> Vue脚手架 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/blogs/Vue/Vue2_2022111208.html#element-ui-的基本使用" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="Element-UI 的基本使用"><!--[--><!--]--> Element-UI 的基本使用 <!--[--><!--]--></a></li><!--]--><!--]--></ul></div></div></div></div><!----><!----><!--]--></div>
    <script type="module" src="/blog/assets/app.af94fc38.js" defer></script>
  </body>
</html>
